<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-16 18:58:48
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 21:41:08
 * @FilePath: \郭招娣\app\src\views\articleEdit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEds
-->
<template>
  <div>
    <div class="top">
      <div style="display: flex; margin: 10px">
        <el-popconfirm
          confirm-button-text="确认"
          cancel-button-text="取消"
          :icon="InfoFilled"
          width="300px"
          icon-color="orange"
          title="确定关闭？如有内容变更，请先保存。"
          @confirm="close"
        >
          <template #reference>
            <div class="close">
              <el-icon><Close /></el-icon>
            </div>
          </template>
        </el-popconfirm>

        <input
          type="text"
          class="input"
          placeholder="请输入文章标题"
          v-model="title"
        />
      </div>
      <div></div>
      <div style="padding: 10px">
        <el-button
          type="primary"
          style="padding: 10px; margin-right: 10px"
          @click="publish"
          >发布</el-button
        >
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon><MoreFilled color="rgb(193, 184, 248)" /></el-icon>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item disabled>参看</el-dropdown-item>
              <el-dropdown-item @click="set">设置</el-dropdown-item>
              <el-dropdown-item>保存草稿</el-dropdown-item>
              <el-dropdown-item disabled>删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <el-divider border-style="double" />
    <v-md-editor v-model="text" height="500px"></v-md-editor>
    <div>
      <el-drawer
        v-model="drawer"
        title="I am the title"
        :with-header="false"
        size="500px"
      >
        <div>
          <h3>文章设置</h3>
          <p style="margin: 10px">
            文章摘要
            <el-input v-model="name" style="width: 400px; height: 100px" />
          </p>
          <p>
            访问密码
            <el-input v-model="password" type="password" show-password />
          </p>
          <p>
            付费查看
            <el-input v-model="money" type="password" show-password />
          </p>
          <p>
            开启评论
            <el-form-item label="评论" prop="delivery">
              <el-switch v-model="delivery1" />
            </el-form-item>
          </p>
          <p>
            首页推荐
            <el-form-item label="评论" prop="delivery">
              <el-switch v-model="delivery2" />
            </el-form-item>
          </p>
           <p> 选择分类
            <el-select
              v-model="classes"
              class="m-2"
              placeholder="Select"
              size="large"
              style="margin-right: 10px"
            >
              <el-option
                v-for="(item, index) in option1"
                v-model="item.title"
                :key="index"
                :label="item.title"
                :value="item.title"
              />
            </el-select>
          </p>
         
             
             <p>
               选择标签
             <el-select
                  v-model="tag"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  :reserve-keyword="false"
                >
                  <el-option
                v-for="(item, index) in option2"
                :key="index"
                :label="item.title"
                :value="item.title"
              />
           </el-select>
             </p>
          
         
          <div>
            <el-button @click="drawer = false">取消</el-button>
            <el-button type="primary" @click="drawer = false">确定</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import {
  asyncAddArticleLists,
  asyncEditArticleLists,
} from "../api/articleList";
import { asyncAddPageLists ,asyncEditPageLists } from '../api/page'
import { asyncClassLists } from "../api/classLists";
import { asyncTagLists } from '../api/tagLists'
import { Close, MoreFilled } from "@element-plus/icons-vue";
export default {
  components: {
    Close,
    MoreFilled,
  },
  data() {
    return {
      text: "",
      isAdd: this.$route.query.isAdd,
      id: this.$route.query.id,
      drawer: false,
      password: "",
      money: "",

      // 输入框的内容
      title: '',
      classes: "",
      option1: [],
      option2:[],
      delivery1: false,
      delivery2: false,
      tag:'',
      // formInline: {
      //   title: "",
      //   status: "",
      // },
    };
  },
  created() {
    this.init();
    // console.log(this.$route.query.isAdd,'kkkkkkffff')
    if(this.$route.query.title){
      this.title=this.$route.query.title
    }
  },
  methods: {
    init() {
      this.initClassLists();
      this.initTagLists()
    },
    // 退回页面
    close() {
      this.$router.push("/layout/all");
    },
    // 初始化列表数据
    async initClassLists() {
      const res = await asyncClassLists("/classLists");
      this.option1 = res.data.list;
    },
     async initTagLists() {
      const res = await asyncTagLists("/tagLists");
      this.option2 = res.data.list;
    },
    // 发布按钮
    async publish() {
     
        console.log(this.isAdd, "kkkk");
        if (this.$route.query.isAdd == 1) {
          const res = await asyncAddArticleLists("/addArticleLists", {
            title: this.title,
            classes:this.classes,
            tag:this.tag
          });
        } else if(this.$route.query.isAdd == 0) {
          // 编辑
          const res = await asyncEditArticleLists("/editArticleLists", {
            title: this.title,
            id: this.id,
            tag:this.tag
          });
        }else if(this.$route.query.isAdd == 3){
          // 页面管理添加
          console.log(123)
           const res = await asyncAddPageLists("/addPageLists", {
            title: this.title,
            id: this.id,
          });
        }else if(this.$route.query.isAdd == 4){
           const res = await asyncAddPageLists("/editPageLists", {
            title: this.title,
            id: this.id,
          });
        }
      
    },
    set(){
      if(this.title===''){
          ElMessage({
          message: "标题不能为空",
          type: "warning",
        });
        this.drawer=false
      }else{
        this.drawer=true
      }
    }
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.top {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 5px;
}
.close {
  border: 1px solid rgb(193, 184, 248);
  width: 15px;
  height: 15px;
  padding: 5px;
  margin-right: 10px;
}
.input {
  width: 200px;
  height: 30px;
  border: 0 solid rgb(193, 184, 248);
  outline: none;
  margin-bottom: 10px;
  border-bottom: hsl(186, 48%, 70%) 1px solid;
  box-shadow: 0px 0px 0px 0px;
}
</style>